<template>
  <div class="wik-document">
    <div class="wik-document-top">
      <span>共{{ tableData.length }}条记录</span>
      <AuthTable :permissions="resourceButton" key-string="fileList">
        <template #edit>
          <span>
            <el-button type="text" :icon="Plus" color="#333" @click="addProjectAnnexFn">新建</el-button>
          </span>
        </template>
      </AuthTable>
    </div>
    <div class="wik-document-bottom">
      <Table
        :data="tableData"
        :columns="tableColumns"
        :options="{
          headerFixed: true
        }"
      >
        <template #stageId="{ scope }">
          <span>{{ getDictItem("mileStage", scope.stageId) }}</span>
        </template>
        <template #userId="{ scope }">
          <span>{{ scope.userName }}</span>
        </template>
        <template #remark="{ scope }">
          <AuthTable :permissions="resourceButton" key-string="fileList">
            <template #edit>
              <TextArea
                :value="scope['remark']"
                @change="
                  (val: any) => {
                    uploadEdit({ ...scope, remark: val });
                  }
                "
              />
            </template>
            <template #get>
              <span class="track-table-text sle">{{ scope["remark"] }}</span>
            </template>
          </AuthTable>
        </template>
        <template #gmtCreate="{ scope }">
          <span>{{ formatHandler(scope.gmtCreate) }}</span>
        </template>
        <template #planNew="{ scope }">
          <span>{{ formatHandler(scope.planNew) }}</span>
        </template>
      </Table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, inject } from "vue";
import { Plus } from "@element-plus/icons-vue";
import Table from "@/components/Table/index.vue";
import TextArea from "./TextArea.vue";
import { TableData, TableColumn } from "@/components/Table/interface";
import { getOrderFollowPage, addOrderFollow, updateOrderFollow } from "@/api/modules/order";
import { getListAllUser } from "@/api/modules/sys";
import { dialogForm } from "@/utils/dialogForm";
import { useDict } from "@/hooks/useDict";
import dayjs from "dayjs";
const formatHandler = (val: any) => {
  return val ? dayjs(val).format("YYYY年MM月DD日") : "--";
};

import AuthTable from "@/components/AuthTable/index.vue";

const { getDictItem, getDict } = useDict(["mileStage"]);
const tableData = ref<TableData[]>([]);
const listAllUser = ref<any>([]);
const { orderId, resourceButton } = defineProps({
  orderId: {
    type: String,
    default: ""
  },
  resourceButton: {
    type: Object,
    default: () => {}
  }
});

const mainTableRef = inject<any>("mainTableRef");

const config = ref({});

const emits = defineEmits(["count"]);

const tableColumns = ref<TableColumn[]>([
  {
    type: "index",
    title: "编号",
    key: "serialNumber",
    width: 46
  },
  {
    title: "所属阶段",
    key: "stageId"
  },
  {
    title: "最新计划",
    key: "planNew"
  },
  {
    title: "延期原因",
    key: "content"
  },
  {
    title: "登记时间",
    key: "gmtCreate"
  },
  {
    title: "备注",
    key: "remark",
    width: 350,
    className: "no-padding"
  },
  {
    title: "责任人",
    key: "userId"
  }
]);

const getOrderFollowPageFn = async () => {
  const { data } = await getOrderFollowPage({
    orderId,
    currentPage: 1,
    pageSize: 500
  });
  tableData.value = data.records ?? [];
  emits("count", {
    key: "track",
    count: tableData.value.length || 0
  });
};

const addProjectAnnexFn = () => {
  config.value = {
    title: "添加进度跟踪",
    width: 65,
    form: {
      formData: {
        orderId,
        stageId: undefined,
        planNew: undefined,
        content: undefined,
        userId: undefined,
        userName: undefined,
        remark: undefined
      },
      rules: {
        stageId: [{ required: true, message: "请选择项目文件类型" }],
        planNew: [{ required: true, message: "请选择计划时间" }],
        userId: [{ required: true, message: "请选择负责人" }],
        content: [{ required: true, message: "请填写原因描述" }]
      }
    },
    api: addOrderFollow,
    column: [
      {
        type: "group",
        title: "",
        direction: "",
        list: [
          {
            type: "select",
            key: "stageId",
            formItemAttribute: {
              label: "所属阶段"
            },
            attributes: {
              placeholder: "请选择任务",
              options: getDict("mileStage"),
              multiple: false,
              filterable: true,
              clearable: true
            }
          },
          {
            type: "date-picker",
            key: "planNew",
            formItemAttribute: {
              label: "新计划"
            },
            attributes: {
              type: "date",
              placeholder: "请选择",
              format: "YYYY-MM-DD HH:mm:ss",
              valueFormat: "YYYY-MM-DD HH:mm:ss"
            }
          },
          {
            type: "select",
            key: "userId",
            formItemAttribute: {
              label: "负责人"
            },
            attributes: {
              placeholder: "请选择",
              options: listAllUser.value,
              multiple: false,
              filterable: true,
              clearable: true,
              changeFn: (val: any, originConfig: any) => {
                const country = listAllUser.value.find((item: any) => item.id === val);
                originConfig.formData.userName = country?.name;
              }
            }
          }
        ]
      },
      {
        type: "input",
        key: "content",
        formItemAttribute: {
          label: "问题描述"
        },
        attributes: {
          placeholder: "请填写问题描述",
          type: "textarea",
          rows: 16
        }
      },
      {
        type: "input",
        key: "remark",
        formItemAttribute: {
          label: "备注"
        },
        attributes: {
          placeholder: "请填写备注",
          type: "textarea",
          rows: 4
        }
      }
    ],
    transformData: (data: any) => {
      return JSON.parse(JSON.stringify(data));
    },
    message: "添加成功"
  };
  dialogForm({
    config: config.value,
    successCallback: () => {
      getOrderFollowPageFn();
      mainTableRef.value.refresh();
    }
  });
};
// 获取全部用户
const getListAllUserFn = async () => {
  const { data } = await getListAllUser();
  listAllUser.value = data;
};

// 编辑跟踪
const uploadEdit = async (row: any) => {
  delete row.tableColRef;
  delete row.dataIndex;
  delete row.serialNumber;
  await updateOrderFollow({ ...row });
  getOrderFollowPageFn();
};

onMounted(async () => {
  await getListAllUserFn();
  getOrderFollowPageFn();
});
</script>
<style lang="scss" scoped>
.wik-document {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 30px;
  display: flex;
  flex-flow: column nowrap;
  padding-bottom: 10px !important;
  box-sizing: border-box;
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 2px;
    border: 1px solid #f4f4f4;
    box-sizing: border-box;
    border-bottom: none;
    color: #333;
    padding: 0 10px;
    :deep(.el-button) {
      color: #333;
    }
  }
  &-bottom {
    flex: 1;
    height: calc(100% - 36px);
  }
  .track-table-text {
    margin: 0 16px;
  }
}
</style>
